<template>
  <div class="pageModal flex-col" style="z-index: 3;">
    <div class="group_1 flex-col">
      <div class="group_2 flex-row">
        <div class="group_3 flex-col"></div>
        <span class="text_1">{{selectUnitData.name}}</span>
        <div class="text-wrapper_1 flex-col"><span class="text_2">{{selectUnitData.state}}</span></div>
      </div>
      <div class="group_4 flex-row">
        <img
          class="image_1"
          referrerpolicy="no-referrer"
          src="./assets/img/SketchPng8721478d8e76e6992154bf1c83a7a8bb57359ac1402b286b091b37a15d119e26.png"
        />
        <div class="text-wrapper_2 flex-col justify-between">
          <span class="text_3">消防安全负责人：</span>
          <span class="text_4">联系电话：</span>
          <span class="text_5">地址：</span>
        </div>
        <div class="text-wrapper_3 flex-col">
          <span class="text_6">{{selectUnitData.responsiblePerson}}</span>
          <span class="text_7">{{selectUnitData.mobile}}</span>
          <span class="text_8">{{selectUnitData.address}}</span>
        </div>
      </div>
      <div class="text-wrapper_4 flex-row justify-between">
        <span class="text_9" @click="showSection('enterpriseInfo')">企业信息</span>
        <span class="text_10" @click="showSection('dangerInfo')">异常信息</span>
        <span class="text_11" @click="showSection('videoMonitor')">视频监控</span>
      </div>
      <div class="enterpriseInfo" v-show="currentSection === 'enterpriseInfo'">
        <div class="group_5 flex-col"><div class="box_1 flex-col"></div></div>
        <div class="text-wrapper_5 flex-row justify-between">
          <span class="text_12">直属消防管理单位：</span>
          <span class="text_13">{{selectUnitData.firePath}}</span>
        </div>
        <div class="text-wrapper_6 flex-row justify-between">
          <span class="text_14">维保企业：</span>
          <span class="text_15">{{selectUnitData.maintenanceName}}</span>
        </div>
        <div class="text-wrapper_7 flex-row justify-between">
          <span class="text_16">主体规模：</span>
          <span class="text_17">{{selectUnitData.employeesNum}}</span>
        </div>
        <div class="text-wrapper_8 flex-row justify-between">
          <span class="text_18">消防设备数：</span>
          <span class="text_19">{{selectUnitData.fightingEquipment}}</span>
        </div>
        <div class="text-wrapper_9 flex-row justify-between">
          <span class="text_20">物联网设备数：</span>
          <span class="text_21">{{selectUnitData.ioTDevices}}</span>
        </div>
        <div class="text-wrapper_10 flex-row justify-between">
          <span class="text_22">微型消防站值班人员：</span>
          <span class="text_23">{{selectUnitData.operatorDuty}}</span>
        </div>
      </div>
      <div class="dangerInfo" 
           v-show="currentSection === 'dangerInfo'"
           style="height: 20rem;
                  overflow-y: scroll;
                  margin-top: 0.7rem;
                  margin-bottom: 0.5rem;
                 "
      >
        <div v-if="selectHiddenDangerData.length === 0" 
             style="color:#fff; 
                    margin-top: 1rem; 
                    margin-bottom: 0.4rem;
                    margin-left: 5rem;
                   "
        >
          暂无异常信息
        </div>
        <div 
             v-else
             :style="{ background: index % 2 === 0? 'rgba(0,65,30,0.6)' : 'unset' }"
             style="color:#fff;
                    margin-top: 0.5rem;
                    margin-bottom: 0.4rem;
                    margin-right: 0.5rem;
                    margin-left: 0.5rem;
                    display: flex;
                    justify-content: left;
                    align-items: start;
                   " 
             v-for="(item, index) in selectHiddenDangerData" 
             :key="index"
        >
          <div style="margin-left: 0.4rem;margin-right: 0.4rem;font-size: 0.5rem;">{{index + 1}}.</div> 
          <div>{{item.hazardDescription}}</div>
        </div>
      </div>
      <div class="videoMonitor" 
           v-show="currentSection === 'videoMonitor'"
           style="height: 20rem;
                  overflow-y: scroll;
                  margin-top: 0.7rem;
                  margin-bottom: 0.5rem;"
      >
        <div v-if="deviceInfoList.length === 0" 
             style="color:#fff; 
                    margin-top: 1rem; 
                    margin-bottom: 0.4rem;
                    margin-left: 5rem;
                   "
        >
          暂无监控数据
        </div>
        <div 
             v-else
             class="videoList"
             :style="{ background: index % 2 === 0? 'rgba(0,65,30,0.6)' : 'unset' }"
             style="color:#fff;
                    margin-top: 0.5rem;
                    margin-bottom: 0.4rem;
                    margin-right: 0.5rem;
                    margin-left: 0.5rem;
                    display: flex;
                    justify-content: left;
                    align-items: start;
                   " 
             v-for="(item, index) in deviceInfoList  " 
             :key="index"
             @click="showSafeVideoModal(item)"
        >
          <div style="margin-left: 0.4rem;margin-right: 0.4rem;font-size: 0.5rem;">{{index + 1}}.</div> 
          <div>{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="safeVideo" 
       v-if="showModalVisible"
       style="z-index:9; 
              color:#fff;
              width: 600px;
              height: 600px;
              background-color: #fff;
              position: fixed; 
              top: 50%; 
              left: 50%; 
              transform: translate(-50%, -50%); 
             "
  >
    <!-- 通过 ref 引用子组件 -->
    <div @click="showModalVisible = false" 
    style="margin-bottom: 0;
    margin-right:0;
    background-color: black;
    width: 100%;
    "
    >
    <div style="background-color: black;margin-left: 97%;"><CloseOutlined /></div>
    </div>
    <ScreenSafeVideo 
      ref="videoRef" 
      :deviceInfo="selectDeviceInfo" 
      @initialized="onPlayerInitialized"
    />
  </div>
</template>

<script setup name="EnterpriseModal">
import { ref, onMounted, defineProps, watch, nextTick } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import { selectUnit, selectHiddenDanger } from "/@/api/jgBigscreen/jgBigscreen";
import { deviceInfoListData } from "/@/api/safealarm/deviceInfo";
import ScreenSafeVideo from "/@/views/Echarts/jgBigscreen/enterpriseModal/videoModal.vue";

const selectUnitData = ref([]);
const selectHiddenDangerData = ref([]);
const deviceInfoList = ref([]);
const showModalVisible = ref(false); 
const selectDeviceInfo = ref({}); 
// 引用子组件
const videoRef = ref(null);

const props = defineProps({
  UnitCode: String,
});
const currentSection = ref('enterpriseInfo'); 

const showSection = (section) => {
  currentSection.value = section;
};

const showSafeVideoModal = async (item) => {
  showModalVisible.value = true; 
  selectDeviceInfo.value = item;
};

const onPlayerInitialized = async () => {
  // 等待下一个 DOM 更新周期，确保子组件已经更新
  await nextTick();
  // 调用子组件的 play 方法
  if (videoRef.value) {
    await videoRef.value.play();
  }
};

// 企业信息
const fetchSelectUnit = async (params) => {
  params = {
    id: props.UnitCode
  };
  try {
    const response = await selectUnit(params);
    selectUnitData.value = response[0];
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

// 隐患信息
const fetchSelectHiddenDanger = async (params) => {
  params = {
    id: props.UnitCode,
    pageNo: "1",
    pageSize: "100"
  };
  try {
    const response = await selectHiddenDanger(params);
    selectHiddenDangerData.value = response.list;
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

// 视频监控信息
const fetchSafeAlarmListData = async (params) => {
  params = {
    enterpriseId: props.UnitCode
  };
  try {
    const response = await deviceInfoListData(params);
    deviceInfoList.value = response.list;
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

onMounted(() => {
  fetchSelectUnit();
  fetchSelectHiddenDanger();
  fetchSafeAlarmListData();
});
</script>

<style scoped lang="less">
@import './assets/index.rem.less';
@import './assets/common.less';
.group_2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start; 
  height: auto; 
  margin-bottom: 0.1rem;
}
.text_1 {
  white-space: normal; 
  word-wrap: break-word; 
}

.show-modal {
  display: block;
}
</style>